<template>
  <div>
    <BHeader />
    <div class="loginBox">
      <div class="pageTit">登录</div>
      <div>
        <div class="loginWrap">
          <div class="picbox">
            <img class="logpic" src="/img/login.png" alt="" />
            <p class="title">登录<br />LOGIN</p>
          </div>
          <div class="sliceLine"></div>
          <div class="inpbox">
            <div class="typeTab">
              <span
                class="basic"
                :class="{ cur: cur == 'pass' }"
                @click="cur = 'pass'"
                >密码登录</span
              >
              <span
                class="basic"
                :class="{ cur: cur == 'msg' }"
                @click="cur = 'msg'"
                >短信登录</span
              >
            </div>
            <div class="loginInp" v-show="cur == 'pass'">
              <el-input
                v-model="account"
                placeholder="手机号/邮箱"
                class="account"
                clearable
                type="medium"
                ><i class="el-icon-user el-input__icon" slot="prefix"> </i
              ></el-input>
              <el-input
                placeholder="密码"
                v-model="passwd"
                class="password"
                show-password
              >
                <i class="el-icon-lock el-input__icon" slot="prefix"> </i>
              </el-input>
            </div>
            <div v-show="cur == 'msg'">
              <div style="display: flex; vertical-align: baseline">
                <el-select
                  v-model="select"
                  placeholder="请选择"
                  style="margin-top: 4px"
                >
                  <el-option label="中国大陆" value="1"></el-option>
                  <el-option label="中国香港" value="2"></el-option>
                  <el-option label="中国台湾" value="3"></el-option>
                </el-select>
                <el-input
                  placeholder="选填写常用手机号"
                  v-model="phone"
                  class="account"
                >
                </el-input>
              </div>

              <!-- varifyCode -->
              <el-input placeholder="验证码" class="varifyCode" v-model="varifyCode">
                <el-button slot="append" type="primary">
                  {{ downSeconds }}
                </el-button>
              </el-input>
            </div>
            <div class="inpOptGroup">
              <div>
                <el-checkbox v-model="isLocal">记住我 </el-checkbox>
                <span style="color: #999; margin-left: 20px"
                  >不是自己的电脑上,不要勾选此项</span
                >
              </div>
              <div class="forget" @click="cur = 'msg'" v-show="cur!=='msg'">无法验证? 忘记密码?</div>
            </div>
            <div
              class="btnGroup"
              style="display: flex; width: 100%; justify-content: space-between"
            >
              <el-button type="primary" class="optBtns" @click="login"
                >登录</el-button
              >
              <el-button
                type="info"
                class="optBtns"
                @click="$router.push('/register')"
                >注册</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="agree">
      登录即代表你同意<a> 用户协议 </a>和
      <a> 隐私政策 </a>
    </div>
    <BFooter />
  </div>
</template>

<script>
import BHeader from "../components/BHeader.vue";
import BFooter from "../components/BFooter.vue";
export default {
  components: { BHeader, BFooter },
  data() {
    return {
      passwd: "",
      account: "",
      phone:'',
      varifyCode:'',
      cur: "pass",
      select: "",
      downSeconds: "点击获取验证码",
      isLocal:false,
      loginTimer:null,
    };
  },
  methods: {
    login() {
      if(this.loginTimer){
        this.$msg({
          message:'登录按钮:请对我温柔点~',
          type:'info'
        })
        return
      }
      this.loginTimer=setTimeout(() => {
        let params = `uname=${this.account}&upwd=${this.passwd}`;
      this.axios.post("/mylogin", params).then((res) => {
        if (res.data.code == 200) {
          this.isLocal?localStorage.setItem("uid", this.account):sessionStorage.setItem("uid", this.account)
          this.$msg({ message: res.data.msg, type: "success" ,duration:1400});
          this.loginTimer=null
          this.$router.push('/')
        } else {
          this.$msg({ message: res.data.msg, type: "error" ,duration:1400});
          this.loginTimer=null
        }
      });
      }, 500)
      
      
    },
  },
  watch: {
    isLocal(newValue) {
    }
  },
};
</script>
<style>
.inpbox .el-input__inner {
  height: 50px;
  line-height: 50px;
}
.optBtns {
  display: block;
  width: 180px;
}
span:hover {
  cursor: pointer;
}
</style>
<style lang="scss" scoped>
.loginBox {
  width: 980px;
  margin: -55px auto;
  position: relative;
  border-top: 1px solid #ddd;
  .pageTit {
    position: relative;
    top: -25px;
    text-align: center;
    width: 120px;
    font-size: 38px;
    line-height: 50px;
    background-color: #fff;
    margin: 0 auto;
  }
  .loginWrap {
    display: flex;
    margin: 0 auto;
    .picbox {
      width: 490px;
      position: relative;
      .title {
        color: #fff;
        text-align: center;
        font-size: 24px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
      .logpic {
        display: block;
        width: 80%;
        margin: auto;
        margin-top: 60px;
        border-radius: 6px;
      }
    }

    .sliceLine {
      margin-top: 20px;
      border-right: 1px solid #ddd;
      height: 347px;
    }
    .inpbox {
      width: 440px;
      padding-left: 49px;
      position: relative;
      margin-bottom: 40px;
      .typeTab {
        display: flex;
        line-height: 16px;
        height: 56px;
        align-items: baseline;
        span {
          margin: 20px 10px 20px 0px;
          font-size: 14px;
        }
        span.cur {
          font-size: 16px;
          color: #00a1d6;
        }
      }
      .account {
        margin-top: 4px;
        margin-bottom: 40px;
      }
      .password,
      .varifyCode {
        margin-bottom: 20px;
      }
      .inpOptGroup {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        .forget {
          color: #00a1d6;
          &:hover {
            cursor: pointer;
          }
        }
      }
    }
  }
}
.agree {
  text-align: center;
  font-size: 12px;
  color: #99a2aa;
  margin: 80px auto 20px auto;
  a {
    color: #00a1d6;
  }
}
</style>
